<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Cards</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

</head>

<body>
    <main>
        <div class="cards">
            <figure class="card">
                <div class="corner left-top"></div>
                <div class="corner left-bottom"></div>
                <div class="corner right-top"></div>
                <div class="corner right-bottom"></div>
                <img src="assets/lakeview-elegance.png" alt="Lakeview Elegance">
                <figcaption>
                    <h3>Lakeview Elegance</h3>
                    <p>
                        258 Serenity Lane, Crestwood Hills
                    </p>
                </figcaption>
            </figure>
            <figure class="card">
                <div class="corner left-top"></div>
                <div class="corner left-bottom"></div>
                <div class="corner right-top"></div>
                <div class="corner right-bottom"></div>
                <img src="assets/vista-paradiso.png" alt="Vista Paradiso" />
                <figcaption>
                    <h3>Vista Paradiso</h3>
                    <p>
                        123 Paradise Road, Lakeview
                    </p>
                </figcaption>
            </figure>
            <figure class="card">
                <div class="corner left-top"></div>
                <div class="corner left-bottom"></div>
                <div class="corner right-top"></div>
                <div class="corner right-bottom"></div>
                <img src="assets/balcony-appartment.jpg" alt="Balcony Apartment" />
                <figcaption>
                    <h3>Garden Vista</h3>
                    <p>
                        123 Tranquil Terrace
                        Greenfield Grove
                    </p>
                </figcaption>
            </figure>
            <figure class="card">
                <div class="corner left-top"></div>
                <div class="corner left-bottom"></div>
                <div class="corner right-top"></div>
                <div class="corner right-bottom"></div>
                <img src="assets/skyline-oasis.png" alt="Skyline Oasis" />
                <figcaption>
                    <h3>Skyline Oasis</h3>
                    <p>
                        450 Metropolitan Ave, Downtown
                    </p>
                </figcaption>
            </figure>
        </div>
    </main>
</body>

</html>